<template>
    <el-select
        :value="value"
        :multiple="multiple"
        :disabled="disabled"
        :placeholder="placeholder"
        @change="change"
        clearable
    >
      <el-option
          v-for="option in options"
          :key="option[val]"
          :label="option[lab]"
          :value="option[val]"
      >
        <span style="float: left">{{ option[lab] }}</span>
        <span v-show="showCode" style="float: right; color: #8492a6; font-size: 13px">{{ option[val] }}</span>
      </el-option>
    </el-select>
  </template>
  
  <script>
  
  export default {
    name: "DictSelect",
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: {
        type: [String, Array],
        required: false,
        default: ''
      },
      options: {
        type: Array,
        required: ()=>[]
      },
      lab:{
        type: String,
        default: 'label'
      },
      val:{
        type: String,
        default: 'value'
      },
      disabled: {
        type: Boolean,
        required: false,
        default: false
      },
      multiple: {
        type: Boolean,
        default: false
      },
      showCode: {
        type: Boolean,
        default: false
      },
      placeholder:{
        type: String,
        default: '请选择'
      }
    },
    mounted() {
    },
    methods: {
      change(value) {
        if (this.multiple) {
          const list = value.map(key => {
            const foundItem = this.options.find(item => item.lxxdm === key);
            return {key, value: foundItem};
          });
          this.$emit('change', value, list);
        } else {
          const foundItem = this.options.find(item => item.lxxdm === value);
          const label = foundItem ? foundItem.lxxmc : "";
          this.$emit('change', value, label);
        }
      },

    }
  };
  </script>